<template>
  <el-menu class="left-menu" :default-active="$route.path" @open="handleOpen" @close="handleClose" :router="true">
    <!-- 遍历并渲染 filteredRoutes 的子路由 -->
    <template v-for="route in routes" :key="route.path">
      <MenuItem :route="route" />
    </template>
  </el-menu>
</template>

<script setup>
import MenuItem from './MenuItem.vue';
import { useRouterStore } from '../store/routerStore';

// 获取所有路由，遍历菜单项
const routes = useRouterStore().routes;


// 路由的打开和关闭事件（如果需要）
const handleOpen = () => {
  console.log('打开子菜单');
};

const handleClose = () => {
  console.log('关闭子菜单');
};
</script>

<style scoped>
.left-menu {
  max-height: calc(100vh - 60px);
  /* 使菜单占据剩余空间 */
  overflow-y: hidden;
  /* 防止内容溢出 */
}
</style>